<template>
    <div class="nvb_admin">
        <aside :class="{ collapsed: store.collapsed }">
            <Nvb_logo></Nvb_logo>
            <Nvb_menu></Nvb_menu>
        </aside>
        <main>
            <div class="nvb_head">
                <Nvb_bread_crumb></Nvb_bread_crumb>
                <div class="nvb_function_area">
                    <IconHome class="action_icon" @click="goIndex"></IconHome>
                    <Nvb_theme></Nvb_theme>
                    <Nvb_user_info_menu></Nvb_user_info_menu>
                </div>
            </div>
            <Nvb_tabs></Nvb_tabs>
            <div class="nvb_container">
                <router-view v-slot="{ Component }">
                    <transition name="fade" mode="out-in">
                        <component
                            :is="Component"
                            class="view_card"
                        ></component>
                    </transition>
                </router-view>
            </div>
        </main>
    </div>
</template>

<script setup lang="ts">
import { IconHome, IconDown } from '@arco-design/web-vue/es/icon'
import type { Component } from 'vue'
import Nvb_menu from '@/components/admin/nvb_menu.vue'
import Nvb_bread_crumb from '@/components/admin/nvb_bread_crumb.vue'
import Nvb_logo from '@/components/admin/nvb_logo.vue'
import Nvb_tabs from '@/components/admin/nvb_tabs.vue'
import Nvb_theme from '@/components/common/nvb_theme.vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/stores'
import Nvb_user_info_menu from '@/components/common/nvb_user_info_menu.vue'

const router = useRouter()
const store = useStore()

function goIndex() {
    router.push({ name: 'dashboard' })
}
</script>

<style lang="scss" scoped>
.nvb_admin {
    display: flex;
    color: var(--color-text-1);
    aside {
        width: 240px;
        border-right: 1px solid var(--bg);
        height: 100vh;
        background-color: var(--color-bg-1);
        transition: all 0.3s;
        position: relative;
    }

    aside.collapsed {
        width: 48px;
        & ~ main {
            width: calc(100% - 48px);
        }
    }
    main {
        width: calc(100% - 240px);
        transition: all 0.3s;
        .nvb_head {
            width: 100%;
            height: 60px;
            border-bottom: 1px solid var(--bg);
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;
            background-color: var(--color-bg-1);
            .nvb_function_area {
                display: flex;
                align-items: center;
                .action_icon {
                    margin-right: 15px;
                    cursor: pointer;
                    font-size: 18px;
                    &:hover {
                        color: var(--active);
                    }
                }
            }
        }

        .nvb_container {
            background-color: var(--bg);
            height: calc(100vh - 90px);
            padding: 15px 20px;
            overflow: hidden;
            overflow-y: auto;
            .view_card {
                background-color: var(--color-bg-1);
                height: 100%;
                padding: 10px 15px;
                border-radius: 4px;
            }
        }
    }
}

.fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.fade-enter-active {
    transform: translateX(-30px);
    opacity: 0;
}

.fade-enter-to {
    transform: translateX(0px);
    opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    transition: all 0.3s ease-out;
}
</style>
